<div data-role=page id=signup data-add-back-btn=true style="background-color: #f0eff6">
	<div data-role=header data-theme=b >
		<h1>Mistake Chasing Game</h1>
		<a href=# data-role=button class="ui-btn-right" data-icon=help> Help </a>
		<a href=index.html rel="external" data-role=button class="ui-btn-left" data-icon=back id="exit"> Back </a>
	</div>
	<div data-role=content>
		<p class="text">CREATE NEW ACCOUNT</p>
		<span class="text" style="font-size: 15px; color: #018cca; padding: 13px 0px;"> User Information </span>
		<input type=text placeholder="First Name" data-inline=true id="firstname"/>
		<input type=text placeholder="Last Name" data-inline=true id="lastname"/>
		<input type=text placeholder="Age" data-inline=true id="age"/>
		<p> </p>
		<span class="text" style="font-size: 15px; color: #018cca; padding: 13px 0px;" > Login Information</span>
		<input type=text placeholder="Email" data-inline=true id="email"/>
		<input type=text placeholder="Password" data-inline=true id="password"/>
		<input type=text placeholder="Repeat Password" data-inline=true />
		<p>
			<a href=# data-role=button data-theme=e data-icon=check id=btn_signup> SIGN UP NEW ACCOUNT
			</a>
		</p>
	</div>
	<div data-role=footer data-theme=b data-position="fixed">
		<h1>Mistake Chasing Game (c) 2013</h1>
	</div>
	<script type="text/javascript">
		$("#btn_signup").bind("click", function() {
			var user_info = {
				firstname: $("#firstname").val(),
				lastname:$("#lastname").val(),
				age:$("#age").val(),
				email:$("#email").val(),
				password:$("#password").val()
			};
			 
			$.ajax({
				 url:"http://127.0.0.1:81/Game/signup.php",
				 dataType: 'jsonp',
				 data: user_info,
				 success: function(json){
					 alert("Success: " + json.success);
					 $.mobile.changePage ("success_infor.html");
				 },
				 error:function(){
					 alert("Error");
				 }      
			});
		});
		
		$("#success_infor").bind("pagebeforehide", function() {
			$.mobile.changePage ("index.html");
		});
	</script>
</div>

